<template>
  <div class="articleComment" v-if="comments">
    <div class="none" v-if="comments.length == 0">
      <!-- <van-image
        width="100"
        height="100"
        lazy-load
        src="https://apis.netstart.cn/icon/xpc.png"
      /> -->
      还没有人评论
    </div>
    <div class="comments" v-else>
      <div class="comment" v-for="(comment, index) in comments" :key="index">
        <div class="avatar" @click.stop="toUser(comment.userid)">
          <van-image
            round
            width="30px"
            height="30px"
            lazy-load
            :src="comment.userInfo.avatar"
          />
        </div>
        <div class="index">
          <div class="top">
            <div class="username">{{ comment.userInfo.username }}</div>
            <svg
              t="1677136516616"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4040"
              width="16"
              height="16"
            >
              <path
                d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
                p-id="4041"
                fill="#999999"
              ></path>
            </svg>
          </div>
          <div class="content" v-html="comment.content"></div>
          <div class="buttom">
            <div class="addtime">{{ comment.addtime | timestampToTime }}</div>
            <div class="right">
              <div @click.stop="doComment">
                <svg
                  t="1677225897804"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11090"
                  width="16"
                  height="16"
                >
                  <path
                    d="M853.333333 768c35.413333 0 64-20.650667 64-55.978667V170.581333A63.978667 63.978667 0 0 0 853.333333 106.666667H170.666667C135.253333 106.666667 106.666667 135.253333 106.666667 170.581333v541.44C106.666667 747.285333 135.338667 768 170.666667 768h201.173333l110.016 117.44a42.752 42.752 0 0 0 60.586667 0.042667L651.904 768H853.333333z m-219.029333-42.666667h-6.250667l-115.797333 129.962667c-0.106667 0.106667-116.010667-129.962667-116.010667-129.962667H170.666667c-11.776 0-21.333333-1.621333-21.333334-13.312V170.581333A21.205333 21.205333 0 0 1 170.666667 149.333333h682.666666c11.776 0 21.333333 9.536 21.333334 21.248v541.44c0 11.754667-9.472 13.312-21.333334 13.312H634.304zM341.333333 490.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m170.666667 0a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
                    fill="#999999"
                    p-id="11091"
                  ></path>
                </svg>
              </div>
              <div @click.stop="doLike">
                <svg
                  t="1677204147051"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="3623"
                  width="16"
                  height="16"
                >
                  <path
                    d="M759.1936 826.9824c-20.0704 21.9136-43.52 32.5632-71.4752 32.5632L420.2496 859.5456c-32.768 0-59.392-27.8528-59.392-62.0544L360.8576 468.2752c28.2624-29.9008 103.936-118.4768 147.0464-250.88 6.7584-20.7872 21.8112-55.5008 47.3088-52.8384 19.8656 1.9456 40.6528 24.4736 43.7248 47.104 1.8432 16.896-14.4384 115.5072-40.5504 167.6288L535.552 424.8576l241.152 0c32.768 0 59.392 27.8528 59.4944 63.2832C838.8608 556.2368 829.952 749.9776 759.1936 826.9824zM296.448 797.3888c0 14.336-23.7568 31.0272-54.4768 31.0272-30.72 0-54.4768-16.6912-54.4768-31.0272L187.4944 486.912c0-14.336 23.7568-31.0272 54.4768-31.0272 30.72 0 54.4768 16.6912 54.4768 31.0272L296.448 797.3888zM895.6928 486.912c0-68.5056-53.3504-124.2112-118.8864-124.2112L629.1456 362.7008c19.6608-59.6992 31.9488-134.4512 28.5696-159.6416-7.0656-51.6096-49.664-95.6416-96.9728-100.2496-22.6304-2.1504-79.1552 2.56-109.1584 94.72-37.9904 116.736-103.8336 195.8912-128.9216 223.1296-20.48-16.6912-48.8448-26.8288-80.6912-26.8288-63.8976 0-113.9712 40.96-113.9712 93.184l0 310.4768c0 52.224 50.0736 93.184 113.9712 93.184 30.9248 0 58.4704-9.728 78.848-25.6 21.1968 33.9968 57.7536 56.6272 99.4304 56.6272l267.4688 0c44.3392 0 82.8416-17.408 114.3808-51.6096C904.704 758.3744 896.1024 496.7424 895.6928 486.912z"
                    fill="#999999"
                    p-id="3624"
                  ></path>
                </svg>
                <div class="num">{{ comment.count_approve }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="likeSaySomething"></div>
    <div class="saySomething">
      <input type="text" v-model="commentText" placeholder="我有话要说" />
      <div class="publish" @click.stop="publish">发布</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comments: null,
      commentText: "",
      nsData: {
        addtime: "",
        content: "",
        count_approve: 0,
        from: 0,
        // id: 9999999,
        ip_location: "",
        is_approved: false,
        is_top: false,
        referid: 0,
        // resource_id: 11607819,
        top_time: 0,
        userid: 13525021,
        userInfo: "",
      },
    };
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      duration: 0,
    });
    let url;
    if (this.$route.query.id == 10510172 || this.$route.query.id == 11704000) {
      url = `/${this.$route.query.id}comment.json`;
    } else {
      url = `https://apis.netstart.cn/xpc/comments?resource_id=${this.$route.query.id}&type=article&page=1`;
    }
    this.$axios.get(url).then((res) => {
      // console.log(res.data.data);
      this.comments = res.data.data.list;
      this.$toast.clear();
    });
  },
  filters: {
    timestampToTime: function (timestamp) {
      if (timestamp === 0 || timestamp == null) {
        return "";
      } else {
        var date = new Date(timestamp * 1000);
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10
            ? "0" + (date.getMonth() + 1)
            : date.getMonth() + 1) + "-";
        var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        return Y + M + D;
      }
    },
  },
  methods: {
    toUser(id) {
      this.$router.push({
        path: "/user",
        query: { userid: id },
      });
    },
    doComment() {
      console.log("doComment");
    },
    doLike() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        console.log("doLike");
      }
    },
    publish() {
      if (this.commentText) {
        if (!localStorage.getItem("nsMine")) {
          this.$router.replace({ path: "/login" });
        } else {
          this.nsData.userInfo = JSON.parse(localStorage.getItem("nsMine"));
          this.nsData.addtime = String(new Date().getTime()).slice(0, 10);
          this.nsData.content = this.commentText;
          this.comments.unshift(this.nsData);
          this.commentText = "";
        }
      } else {
        this.$toast("请输入内容");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.articleComment {
  position: relative;
  height: 412px;

  .none {
    font-size: 18px;
    font-weight: bold;
    color: #999;
    // margin-top: 100px;
    padding-top: 100px;
    text-align: center;
  }

  .comments {
    height: 362px;
    overflow-y: scroll;

    .comment {
      display: flex;
      margin-top: 20px;

      .avatar {
        width: 31px;
        height: 31px;
        border-radius: 50%;
        border: 1px solid #f7f7f7;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        margin-left: 20px;
      }

      .index {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-bottom: 1px solid #f2f2f2;

        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;

          .username {
            font-size: 14px;
            color: #999;
          }

          .icon {
            margin-right: 10px;
          }
        }

        .content {
          // white-space: pre-wrap;
          font-size: 15px;
          margin-bottom: 15px;
          padding-right: 17px;
        }

        .buttom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 15px;

          .addtime {
            font-size: 12px;
            color: #c0c0c0;
          }

          .right {
            // width: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            > div {
              margin-right: 15px;
              display: flex;
              align-items: center;

              .icon {
                color: #999;
              }

              .num {
                font-size: 12px;
                color: #c0c0c0;
                height: 16px;
                line-height: 16px;
                margin-left: 3px;
              }
            }
          }
        }
      }
    }
  }

  .likeSaySomething {
    height: 50px;
  }

  .saySomething {
    position: fixed;
    right: -375px;
    bottom: 0;
    width: 100vw;
    height: 50px;
    border-top: 1px solid #f7f7f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;

    .publish {
      color: #f2f2f2;
      font-size: 17px;
      margin-right: 20px;
    }

    /* 如果input必须要有边框，但需要去掉选中时的蓝色框 ↓↓↓ */
    input {
      background: none;
      outline: none;
      border: none;
      width: 75vw;
      background-color: #f2f2f2;
      height: 34px;
      border-radius: 5px;
      margin-left: 10px;
      padding-left: 10px;
    }
    /* WebKit browsers */
    input::-webkit-input-placeholder {
      color: #c0c0c0;
      font-size: 15px;
    }
    /* Mozilla Firefox 4 to 18 */
    input:-moz-placeholder {
      color: #c0c0c0;
      opacity: 1;
      font-size: 15px;
    }
    /* Mozilla Firefox 19+ */
    input::-moz-placeholder {
      color: #c0c0c0;
      opacity: 1;
      font-size: 15px;
    }
    /* Internet Explorer 10+ */
    input:-ms-input-placeholder {
      color: #c0c0c0;
      font-size: 15px;
    }
    input:focus {
      border: none;
    }
  }
}
</style>
